<template>
  <div class="box">
    <!-- <ClientOnly> -->
    <div class="pt-20">
      <div v-for="(item, index) in list" :key="index">{{ item }}</div>
    </div>
    <!-- </ClientOnly> -->

    <PageNation
      :page="currentPage"
      :total="totalItems"
      :pageSize="10"
      :showSizes="false"
      @onPageChange="pageChange"
      @onPageSizeChange="onPageSizeChange"
    />
    <MyLink alt="ceshi" to="/web" title="ceshi提示" class="text-theme">跳转到web</MyLink>
    <button @click="changeParams">修改params</button>
  </div>
</template>
<script setup lang="ts">
import { ref } from "vue";
import { usePagination } from "@/hooks/usePage";
import { useHttp } from "~/utils";
import { getUserInfo } from "@/api/apiUser";
const getList = async (params: any) => {
  // const result = await getUserInfo();
  // console.log(result);
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({
        total: 30,
        list: ["服务端渲染", 2, "测试渲染"],
      });
    }, 2000);
  });
};
const searchParams = ref({ id: 1 });
const { totalItems, currentPage, list, fetchData, pageChange } = usePagination(getList, {
  searchParams: searchParams.value,
  dealList: (list: any) => {
    return list;
  },
});
await fetchData();
const changeParams = () => {
  searchParams.value.id += 1;
  currentPage.value = 1;
  fetchData();
};
const onPageSizeChange = (pageSize: number) => {
  console.log(pageSize);
};

// useSeoMeta({
//   title: "My home Site",
//   ogTitle: "My Amazing Site",
//   description: "This is my amazing site, let me tell you all about it.",
//   ogDescription: "This is my amazing site, let me tell you all about it.",
//   ogImage: "https://example.com/image.png",
//   twitterCard: "summary_large_image",
// });
</script>
<style lang="scss" scoped>
.box {
  color: #60d659;
}
</style>
